<template>
  <span 
    class="el-tag" 
    :class="tagClass"
  >{{ displayText }}</span>
</template>

<script>
export default {
  name: 'JVxeStatusTagCell',
  props: {
    cellValue: {
      type: [String, Number],
      required: true
    }
  },
  computed: {
    displayText() {
      const value = String(this.cellValue);
      const statusMap = {
        '0': '草稿',
        '1': '生产中',
        '2': '待质检',
        '3': '待发货'
      };
      return statusMap[value] || '未知状态';
    },
    tagClass() {
      const value = String(this.cellValue);
      const classMap = {
        '0': 'el-tag--gray',
        '1': 'el-tag--blue',
        '2': 'el-tag--orange',
        '3': 'el-tag--green'
      };
      return classMap[value] || '';
    }
  }
}
</script>

<style scoped>
/* 基础样式 - 确保垂直水平居中 */
.el-tag {
  display: inline-block;
  padding: 0 8px;
  border-radius: 2px;
  font-size: 12px;
  /* 关键：固定高度与行高一致实现垂直居中 */
  height: 22px;
  line-height: 22px;
  /* 水平居中 */
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  box-sizing: border-box;
}

/* 灰色 - 草稿 */
.el-tag--gray {
  background-color: #f2f3f5;
  color: #4e5969;
  border-color: #e5e6eb;
}

/* 蓝色 - 生产中 */
.el-tag--blue {
  background-color: #ecf5ff;
  color: #1890ff;
  border-color: #b3d8ff;
}

/* 橙色 - 待质检 */
.el-tag--orange {
  background-color: #fff7e6;
  color: #fa8c16;
  border-color: #ffe8cc;
}

/* 绿色 - 待发货 */
.el-tag--green {
  background-color: #f0fff4;
  color: #52c41a;
  border-color: #b7eb8f;
}
</style>